<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Template &middot; Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
        <![endif]-->

        <!-- Fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
        <link rel="shortcut icon" href="ico/favicon.png">
        <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>

        <!-- lib -->
        <link rel="stylesheet" type="text/css" href="css/lib/base.css" media="all" />
        <link rel="stylesheet" type="text/css" href="css/jquery.rs.carousel.css" media="all" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" media="all" />


        <script type="text/javascript" src="js/jquery.js"></script>

        <!-- carousel -->
        <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-6.2.0.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.touchSwipe.min.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.transit.min.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.ba-throttle-debounce.min.js"></script>
        <script type="text/javascript">
            
            $(function() {  
		
                $('#foo4').carouFredSel({
                    responsive: true,
                    width: '100%',
                    scroll: 1,
                    items: {
                        width: 400,
                        // 400 -) 2 item //
                        // 300 -) 3 item //
                        //	height: '30%',	//	optionally resize item-height
                        visible: {
                            min: 1,
                            max: 6
                        }
                    },
                    prev : "#foo1_prev",
                    next : "#foo1_next"
                });
                
                $('#foo5').carouFredSel({
                    responsive: true,
                    width: '100%',
                    scroll: 1,
                    items: {
                        width: 400,
                        //	height: '30%',	//	optionally resize item-height
                        visible: {
                            min: 1,
                            max: 1
                        }
                    },
                    auto: {
                        delay: 900,
                        timeoutDuration: 3000
                    }

                });
                
                $('#our-client').carouFredSel({
                    responsive: true,
                    width: '100%',
                    scroll: 1,
                    items: {
                        width: 250,
                        //	height: '30%',	//	optionally resize item-height
                        visible: {
                            min: 1,
                            max: 5
                        }
                    },
                    auto: {
                        delay: 900,
                        timeoutDuration: 5000
                    },
                    prev : "#foo2_prev",
                    next : "#foo2_next"

                });
                
            });
            
        </script>



    </head>

    <body>
        <div class="container">
            <div class="row-fluid">
                <div class="masthead">
                    <h3 class="muted"><img src="img/Logo.png"></h3>
                    <div class="navbar">
                        <div class="navbar-inner">
                            <!-- <div class="container"> -->

                            <div class="nav-collapse collapse">
                                <ul class="nav">
                                    <li class="active"><a href="#">Home</a></li>
                                    <li><a href="#">Projects </a></li>
                                    <li><a href="#">Services</a></li>
                                    <li><a href="#">Downloads</a></li>
                                    <li><a href="#">About</a></li>
                                    <li><a href="#">Contact</a></li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li class="nav-header">Nav header</li>
                                            <li><a href="#">Separated link</a></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <!--</div>-->
                        </div>
                    </div><!-- /.navbar -->
                </div>
            </div>
            <!-- slider -->
            <div class="slider-header">
                <div class="slider-wrapper"></div>
                <div id="slider_row">

                </div>
            </div>
            <!-- //slider -->

            <!-- Jumbotron -->
            <div class="jumbotron">
                <h1>Marketing stuff!</h1>
                <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                <a class="btn btn-large btn-success" href="#">Get started today</a>
            </div>

            <hr>

            <!-- Example row of columns -->
            <div class="row-fluid">
                <div class="span3 contentbox">
                    <h2 class="heading"><span class="box-heading" style="background:url('img/Grass.png') center no-repeat;"></span><span class="Title-heading">Grass</span><span class="description-heading">This is title</span></h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
                <div class="span3 contentbox">
                    <h2 class="heading"><span class="box-heading" style="background:url('img/tree.png') center no-repeat;"></span><span class="Title-heading">Tree</span><span class="description-heading">This is title</span></h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
                <div class="span3 contentbox">
                    <h2 class="heading"><span class="box-heading" style="background:url('img/shop.png') center no-repeat;"></span><span class="Title-heading">Shopping</span><span class="description-heading">This is title</span></h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
                <div class="span3 contentbox">
                    <h2 class="heading"><span class="box-heading" style="background:url('img/paypal.png') center no-repeat;"></span><span class="Title-heading">PayPal</span><span class="description-heading">This is title</span></h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span9">
                    <h2 class="heading"><span class="box-heading"></span><span class="Title-heading">Recent Works</span><span class="description-heading">Slider Left & Right</span></h2>



                    <div class="list_carousel responsive">
                        <ul id="foo4">
                            <li>
                                <div class="image-carousel">
                                    <img src="http://farm9.staticflickr.com/8447/8008209554_81d15e3631.jpg"  style="height:238px; width: 100%;">
                                </div>
                                <div class="text-carousel">
                                    <h4 style="padding: 10px;">Villa This is House</h4>
                                </div>
                                <div class="readmore">
                                    <div class="btn-picture"></div>
                                    <div class="btn-text"></div>
                                </div>
                            </li>
                            <li>
                                <div class="image-carousel">
                                    <img src="http://farm9.staticflickr.com/8501/8287329324_64ed195324.jpg"  style="height:238px; width: 100%;">
                                </div>
                                <div class="text-carousel">
                                    <h4 style="padding: 10px;">New York City. This is Big City</h4>
                                </div>
                                <div class="readmore">
                                    <div class="btn-picture"></div>
                                    <div class="btn-text"></div>
                                </div>
                            </li>
                            <li>
                                <div class="image-carousel">
                                    <img src="http://farm9.staticflickr.com/8501/8287329324_64ed195324.jpg"  style="height:238px; width: 100%;">
                                </div>
                                <div class="text-carousel">
                                    <h4 style="padding: 10px;">New York City. This is Big City</h4>
                                </div>
                                <div class="readmore">
                                    <div class="btn-picture"></div>
                                    <div class="btn-text"></div>
                                </div>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
                        <a class="next" id="foo1_next" href="#"><span>next</span></a>

                    </div>


                </div>
                <div class="span3">
                    <h2 class="heading"><span class="box-heading"></span><span class="Title-heading">Wellcome</span><span class="description-heading">Wellcome To theme Memory</span></h2>
                    <div class="list_carousel responsive">
                        <ul id="foo5">
                            <li>
                                <div class="text-memorial">
                                    <p>

                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                    </p>
                                </div>
                                <div style="float:left; width: 100%; height:132px; background:url('http://farm9.staticflickr.com/8363/8271890528_bf176bf44e.jpg'); background-size: cover;">
                                </div>
                                <div style="float:left; width:100%; height:65px; margin-top: 2px; background:#a9dc3a;">
                                    <h4 style="color:#eefeef; text-align: left; padding: 10px;">Steve lemaono</h4>
                                </div>
                            </li>

                            <li>
                                <div class="text-memorial">
                                    <p>

                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                    </p>
                                </div>
                                <div style="float:left; width: 100%; height:132px; background:url('http://farm9.staticflickr.com/8435/7944887190_5633f75d1b.jpg'); background-size: cover;">
                                </div>
                                <div style="float:left; width:100%; height:65px; margin-top: 2px; background:#a9dc3a;">
                                    <h4 style="color:#eefeef; text-align: left; padding: 10px;">Blizzard Frozen</h4>
                                </div>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

            <div class="row-fluid">

                <div class="span12">
                    <h2 class="heading"><span class="box-heading"></span><span class="Title-heading">Our Partner</span><span class="description-heading">This is OurPartner have Client By Yark</span></h2>
                    <div class="list_carousel responsive">

                        <ul id="our-client" class="our-partner">
                            <li><img src="http://www.wpexplorer.me/premium-ultra/files/2012/08/url1.png"></li>
                            <li><img src="http://img.labnol.org/di/wordpress1.png"></li>
                            <li><img src="http://www.wpexplorer.me/premium-ultra/files/2012/08/buddypress-500x450.png"></li>
                            <li><img src="http://www.wpexplorer.me/premium-ultra/files/2012/08/jquery_logo.jpg"></li>
                            <li><img src="http://www.wpexplorer.me/premium-ultra/files/2012/08/jquery_logo.jpg"></li>
                            <li><img src="http://www.wpexplorer.me/premium-ultra/files/2012/08/jquery_logo.jpg"></li>
                        </ul>

                        <div class="clearfix"></div>
                        <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
                        <a class="next" id="foo2_next" href="#"><span>next</span></a>
                    </div>
                </div>

            </div>


        </div> <!-- /container -->

        <div class="footer container">

            <div class="container">
                <div class="row-fluid">
                    <div class="span4">
                        <p>&copy; Company 2013</p>
                    </div>

                </div>
            </div>

        </div>

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/bootstrap-transition.js"></script>
        <script src="js/bootstrap-alert.js"></script>
        <script src="js/bootstrap-modal.js"></script>
        <script src="js/bootstrap-dropdown.js"></script>
        <script src="js/bootstrap-scrollspy.js"></script>
        <script src="js/bootstrap-tab.js"></script>
        <script src="js/bootstrap-tooltip.js"></script>
        <script src="js/bootstrap-popover.js"></script>
        <script src="js/bootstrap-button.js"></script>
        <script src="js/bootstrap-collapse.js"></script>
        <script src="js/bootstrap-typeahead.js"></script>

    </body>
</html>